<template>
  <div ref="sceneContainer"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


export default {
  mounted() {
    // 获取容器元素
    const container = this.$refs.sceneContainer;

    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 3, 5);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // 添加光源
    const pointLight = new THREE.PointLight(0xffffff, 100, 100);
    pointLight.position.set(5, 5, 5);
    scene.add(pointLight);

    const sphereSize = 1;
    const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
    scene.add(pointLightHelper);

    // 创建GLTF加载器
    const loader = new GLTFLoader();
    let mixer;
    // 加载模型
    loader.load(
      '/models/t-rex/scene.gltf', // 从 public 目录加载模型
      function (gltf) {
        console.log(gltf)
        const model = gltf.scene;
        model.scale.setScalar(0.5);
        model.rotation.y = Math.PI / 2;

        scene.add(model);
        // 创建 AnimationMixer 实例
        mixer = new THREE.AnimationMixer(model);

        // 获取并播放动画
        const animations = gltf.animations;  // 获取模型中的所有动画
        if (animations && animations.length > 0) {
          const action = mixer.clipAction(animations[1]);  // 使用第一个动画
          action.play();  // 播放动画
        }

      },
      function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      function (error) {
        console.error('An error happened while loading the model:', error);
      }
    );
    const controls = new OrbitControls(camera, renderer.domElement);

    // 射线和鼠标的设置
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    // 创建文本元素
    const clickText = document.createElement('div');
    clickText.style.position = 'absolute';
    clickText.style.color = 'white';
    clickText.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    clickText.style.padding = '5px';
    clickText.style.borderRadius = '5px';
    clickText.style.display = 'none'; // 初始不显示
    document.body.appendChild(clickText);

    // 鼠标点击事件
    function onMouseClick(event) {
      // 将鼠标坐标转换为标准化设备坐标
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      // 设置射线起点和方向
      raycaster.setFromCamera(mouse, camera);

      // 检测与场景中对象的相交情况
      const intersects = raycaster.intersectObjects(scene.children, true);

      if (intersects.length > 0) {
        // 如果点击了对象，显示文本提示
        clickText.style.display = 'block';
        clickText.innerHTML = '已点击';

        // 将文本定位在鼠标点击位置
        clickText.style.left = `${event.clientX}px`;
        clickText.style.top = `${event.clientY}px`;

        // 隐藏文本一段时间后消失
        setTimeout(() => {
          clickText.style.display = 'none';
        }, 1000);
      }
    }

    // 绑定鼠标点击事件
    window.addEventListener('click', onMouseClick, false);


    // 渲染循环
    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();  // 获取时间增量
      if (mixer) mixer.update(delta);  // 更新动画
      controls.update();
      renderer.render(scene, camera);
    };
    const clock = new THREE.Clock();  // 创建时间钟
    animate();
  }
};
</script>

<style>
/* 设置容器的样式以适应 3D 场景 */
div {
  width: 100vw;
  height: 100vh;
}
</style>